/* Set maximum size for "wallet-container" */
@media (min-width: 1904px) {
  .wallet-content-container {
    max-width: 1603px !important;
  }
}

/* Limit minimum width */
html {
  min-width: 320px !important;
  font-size: 14px !important;
}

/* Limit maximum width */
.container {
  max-width: 1185px !important;
}

/* ========== CSS Style Reset ========== */
.monospace {
  font-family: monospace !important;
}

i {
  font-family: 'Material Icons' !important;
}

div {
  padding: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
}

p {
  /* size - 14px,  height - 19px, normal */
  @extend .mew-body;
}

h1 {
  /* size - 30px,  height - 36px, bold */
  @extend .mew-subtitle;
}

h2 {
  /* size - 22px,  height - 26px, bold */
  @extend .mew-heading-2;
}

h3 {
  /* size - 16px,  height - 22px, bold */
  @extend .mew-heading-3;
}

h4 {
  /* size - 16px,  height - 22px, normal */
  @extend .mew-heading-4;

  font-weight: 400;
}

h5 {
  @extend .mew-body;
}

h6 {
  /* size - 12px,  height - 14px, normal */
  @extend .mew-label;
}

/* ========== Text ========== */
.color--inherit {
  color: inherit !important;
}

.text-transform--initial {
  text-transform: initial !important;
}

.text-transform--none {
  text-transform: none !important;
}

.text-decoration--none {
  text-decoration: none !important;
}

.text-decoration--underline {
  text-decoration: underline;
}

.word-break--break-all {
  word-break: break-all;
  white-space: initial;
}

.break-word {
  word-break: break-word;
  white-space: initial;
}

.white-space--nowrap {
  white-space: nowrap !important;
}

.letter-spacing--none {
  letter-spacing: 0 !important;
}

.letter-spacing--initial {
  letter-spacing: initial !important;
}

.line-height--initial {
  line-height: initial !important;
}

/* ========== Cursor ========== */
.pointer-event--none {
  pointer-events: none;
}

.user-select--none {
  user-select: none;
}

.cursor--pointer {
  cursor: pointer !important;
}

/* ========== Border ========== */
.border-radius--15px {
  border-radius: 15px !important;
}

.border-radius--12px {
  border-radius: 12px !important;
}

.border-radius--10px {
  border-radius: 10px !important;
}

.border-radius--8px {
  border-radius: 8px !important;
}

.border-radius--5px {
  border-radius: 5px !important;
}

/* ========== Box shadow ========== */
.bs-wallet-block {
  box-shadow: 0 12px 17px #151d3f08 !important;
}

.bs-small {
  box-shadow: 0px 1.6px 6px #00000045 !important;
}

.bs-button {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

/* ========== Other ========== */
.overflow--hidden {
  overflow: hidden !important;
}

.position--relative {
  position: relative;
}

.width--full {
  width: 100% !important;
}

.height--full {
  height: 100% !important;
}

.display--block {
  display: block !important;
}

.spacer-y-medium {
  height: 5rem;
}

.rotate {
  &.transition {
    transition: all 1200ms ease;
  }

  &.r180 {
    transform: rotate(180deg);
  }

  &.r90 {
    transform: rotate(90deg);
  }
}

/* ========= Convert SVG to white ========= */
.make-white-svg {
  filter: brightness(10);
}

/* ========= Remove up down button for input[type=number] ========= */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0;
  /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
  -moz-appearance: textfield;
  /* Firefox */
}

/* ===== Custom Scrollbar ===== */
/* Firefox */
* {
  scrollbar-width: auto;
  scrollbar-color: #c8c8c8 #f4f4f4;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 10px;
}

*::-webkit-scrollbar-track {
  background: #f4f4f4;
}

*::-webkit-scrollbar-thumb {
  background-color: #c8c8c8;
  border-radius: 10px;
  border: 2px solid #f4f4f4;
}

.v-dialog {
  border-radius: 12px !important;
}

// just for prototype
.prototype-background {
  background: linear-gradient(146.16deg, #C549FF 4.03%, #654BFF 94.83%);
}
